/**
 * @description 登录页面对应的属性组件
 */
import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, Select, Radio, Input, Tooltip } from 'antd';
import {
  InfoCircleOutlined
} from '@ant-design/icons';

import { replaceObjectStyle, replaceCssStyle } from '@/utils/style';
import { AntIConTip, AntUrl, iconTextReg } from '@/utils/Const';
import { setAttrForm } from '@/utils/AttrForm';
import { copyTemplate, pasteTemplate } from '@/utils/clipboard';
import { UpdateContext } from '@/store/updateContext';

import StyleWrapper from '@/components/StylesWrapper';
import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from './Components/AttrHeaderBtn';
import AbIcon from '@/components/DecorateIcons/Ab_Icon';

// 模式
const modeOptions = [
  {
    value: 'inline',
    label: '竖向',
  },
  // {
  //   value: 'vertical',
  //   label: '垂直',
  // },
  {
    value: 'horizontal',
    label: '横向',
  },
]

const titleShowOptions = [
  {
    label: '开',
    value: true
  },
  {
    label: '关',
    value: false
  }
]


function MenuAttr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()

  // 更新style样式文件
  let upateStyleEvent = (keys) => {
    let divData = Object.assign({}, form.getFieldValue(keys))

    // keys数组的最后一项，就是key
    let key = keys.at(-1)
    replaceObjectStyle(actKey, key, divData)
  }

  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    replaceCssStyle(actKey, value)
  }

  // 图标输入框变化事件，比普通输入框，多一个字符串转化逻辑
  let iconEvent = (keys, value) => {

    // 去除 空格、<、/> 
    let newValue = value.replace(iconTextReg, '')
    form.setFieldValue(keys, newValue)

    onConfigEvent(keys, newValue)
  }

  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }

  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------

  // 三种模式对应三种数据
  const items = useMemo(() => {
    let mode = template2.base.mode
    // 公共数据
    const items = [
      {
        key: 'mode',
        label: '模式',
        children:
          <>
            <Form.Item
              label="模式"
              name={['base', 'mode']}
            >
              <Select
                options={modeOptions}
                onChange={(value) => onConfigEvent(['base', 'mode'], value)}
              >
              </Select>
            </Form.Item >
          </>
      },
      {
        key: 'text',
        label: "文本",
        children: <>
          <Form.Item
            label="首页"
            name={['base', 'text_home']}
          >
            <Input
              onChange={(e) => onConfigEvent(['base', 'text_home'], e.target.value)}
            />
          </Form.Item>
          <Form.Item
            label="个人中心"
            name={['base', 'text_center']}
          >
            <Input
              onChange={(e) => onConfigEvent(['base', 'text_center'], e.target.value)}
            />
          </Form.Item>
        </>
      }
    ]

    // 图表
    if (template2.base.icon_flag) {
      items.push(
        {
          key: 'icon',
          label: "图标",
          children: <>
            <Form.Item
              label="图标开关"
              name={['base', 'icon_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'icon_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>
            <Form.Item
              label="首页"
              name={['base', 'icon_home']}
            >
              <Input
                onChange={(e) => iconEvent(['base', 'icon_home'], e.target.value)}
                suffix={
                  <Tooltip title={AntIConTip}>
                    <InfoCircleOutlined
                      style={{
                        color: 'rgba(0,0,0,.45)',
                      }}
                      onClick={() => window.open(AntUrl, "_blank")}
                    />
                  </Tooltip>
                }
              />
            </Form.Item>
            <Form.Item
              label="个人中心"
              name={['base', 'icon_center']}
            >
              <Input
                onChange={(e) => iconEvent(['base', 'icon_center'], e.target.value)}
              />
            </Form.Item>
          </>
        }
      )
    }

    switch (mode) {
      case 'inline':
        // inline内嵌
        let inlineItmes = [
          {
            key: 'inline_box',
            label: '总盒子',
            children:
              <StyleWrapper form={form} preKeys={['inline_box', 'default']} onStyleChange={() => upateStyleEvent(['inline_box'])} />
          },
          {
            key: 'inline_menu_ul',
            label: '菜单ul盒子',
            children:
              <StyleWrapper form={form} preKeys={['inline_menu', 'default']} onStyleChange={() => upateStyleEvent(['inline_menu'])} />
          },
          {
            key: 'inline_menu_li',
            label: <>
              菜单li盒子
              <Tooltip title="首页的 菜单li盒子 == 一级盒子">
                <InfoCircleOutlined
                  style={{
                    color: 'rgba(0,0,0,.45)',
                  }}
                  onClick={() => window.open(AntUrl, "_blank")}
                />
              </Tooltip>
            </>
            ,
            children:
              <StyleWrapper form={form} preKeys={['inline_1', 'default']} onStyleChange={() => upateStyleEvent(['inline_1'])} />
          },
          {
            key: 'inline_1',
            label: '一级',
            children: <Collapse accordion size='middle' items={[
              {
                key: 'item',
                label: '盒子',
                children:
                  <StyleWrapper form={form} preKeys={['inline_1_item', 'default']} onStyleChange={() => upateStyleEvent(['inline_1_item'])} />
              },
              {
                key: 'item-hover',
                label: '盒子-悬浮',
                children:
                  <StyleWrapper form={form} preKeys={['inline_1_item', 'hover']} onStyleChange={() => upateStyleEvent(['inline_1_item'])} />
              },
              {
                key: 'item-selected',
                label: '盒子-选中',
                children:
                  <StyleWrapper form={form} preKeys={['inline_1_item_selected', 'default']} onStyleChange={() => upateStyleEvent(['inline_1_item_selected'])} />
              },
              {
                key: 'icon',
                label: '图标',
                children:
                  <StyleWrapper form={form} preKeys={['inline_1_item_icon', 'default']} onStyleChange={() => upateStyleEvent(['inline_1_item_icon'])} />
              },
              {
                key: 'title',
                label: '标题',
                children:
                  <StyleWrapper form={form} preKeys={['inline_1_item_content', 'default']} onStyleChange={() => upateStyleEvent(['inline_1_item_content'])} />
              },
              {
                key: 'arrow',
                label: '箭头',
                children:
                  <StyleWrapper form={form} preKeys={['inline_1_item_arrow', 'default']} onStyleChange={() => upateStyleEvent(['inline_1_item_arrow'])} />
              },
            ]} />
          },
          {
            key: 'inline_2',
            label: '二级',
            children: <Collapse accordion size='middle' items={[
              {
                key: 'box',
                label: '总盒子',
                children:
                  <StyleWrapper form={form} preKeys={['inline_2', 'default']} onStyleChange={() => upateStyleEvent(['inline_2'])} />
              },
              {
                key: 'item',
                label: 'item',
                children:
                  <StyleWrapper form={form} preKeys={['inline_2_item', 'default']} onStyleChange={() => upateStyleEvent(['inline_2_item'])} />
              },
              {
                key: 'item-hvoer',
                label: 'item-悬浮',
                children:
                  <StyleWrapper form={form} preKeys={['inline_2_item', 'hover']} onStyleChange={() => upateStyleEvent(['inline_2_item'])} />
              },
              {
                key: 'item-selected',
                label: 'item-选中',
                children:
                  <StyleWrapper form={form} preKeys={['inline_2_item_selected', 'default']} onStyleChange={() => upateStyleEvent(['inline_2_item_selected'])} />
              },
            ]} />
          },
        ]
        items.push(...inlineItmes)
        break;

      case 'vertical':
        // vertical垂直
        let verticalItmes = [
        ]
        items.push(...verticalItmes)
        break;

      case 'horizontal':
        // horizontal水平
        let horizontalItmes = [
          {
            key: 'horizontal_box',
            label: '总盒子',
            children:
              <StyleWrapper form={form} preKeys={['horizontal_box', 'default']} onStyleChange={() => upateStyleEvent(['horizontal_box'])} />
          },
          {
            key: 'horizontal_menu',
            label: '菜单ul盒子',
            children:
              <StyleWrapper form={form} preKeys={['horizontal_menu', 'default']} onStyleChange={() => upateStyleEvent(['horizontal_menu'])} />
          },
          {
            key: 'horizontal_1',
            label: '一级',
            children: <Collapse accordion size='middle' items={[
              {
                key: 'box',
                label: '盒子',
                children:
                  <StyleWrapper form={form} preKeys={['horizontal_1', 'default']} onStyleChange={() => upateStyleEvent(['horizontal_1'])} />
              },
              {
                key: 'box-hover',
                label: '盒子悬浮',
                children:
                  <StyleWrapper form={form} preKeys={['horizontal_1', 'hover']} onStyleChange={() => upateStyleEvent(['horizontal_1'])} />
              },
              {
                key: 'box-selected',
                label: '盒子选中',
                children:
                  <StyleWrapper form={form} preKeys={['horizontal_1_selected', 'default']} onStyleChange={() => upateStyleEvent(['horizontal_1_selected'])} />
              },
              {
                key: 'icon',
                label: '图标',
                children:
                  <StyleWrapper form={form} preKeys={['horizontal_1_icon', 'default']} onStyleChange={() => upateStyleEvent(['horizontal_1_icon'])} />
              },
              {
                key: 'title',
                label: '标题',
                children:
                  <StyleWrapper form={form} preKeys={['horizontal_1_content', 'default']} onStyleChange={() => upateStyleEvent(['horizontal_1_content'])} />
              },
            ]} />
          },
          {
            key: 'horizontal_2',
            label: '二级',
            children: <Collapse accordion size='middle' items={[
              {
                key: 'box',
                label: '总盒子',
                children:
                  <StyleWrapper form={form} preKeys={['horizontal_2', 'default']} onStyleChange={() => upateStyleEvent(['horizontal_2'])} />
              },
              {
                key: 'box_ul',
                label: '盒子',
                children:
                  <StyleWrapper form={form} preKeys={['horizontal_2_box', 'default']} onStyleChange={() => upateStyleEvent(['horizontal_2_box'])} />
              },
              {
                key: 'item',
                label: 'item',
                children:
                  <StyleWrapper form={form} preKeys={['horizontal_2_item', 'default']} onStyleChange={() => upateStyleEvent(['horizontal_2_item'])} />
              },
              {
                key: 'item-hvoer',
                label: 'item-悬浮',
                children:
                  <StyleWrapper form={form} preKeys={['horizontal_2_item', 'hover']} onStyleChange={() => upateStyleEvent(['horizontal_2_item'])} />
              },
              {
                key: 'item-selected',
                label: 'item-选中',
                children:
                  <StyleWrapper form={form} preKeys={['horizontal_2_item_selected', 'default']} onStyleChange={() => upateStyleEvent(['horizontal_2_item_selected'])} />
              },
            ]} />
          },
        ]
        items.push(...horizontalItmes)
        break;
    }

    return items
  }, [
    template2.base.mode,
    updateCtx.updateFlag
  ])


  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>
      <Form
        name='menu'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 6,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion size='middle' items={items} />

      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>
  )
}
export default React.memo(MenuAttr) 